<template>
	<div>
		<div class="week">
			<div class="week_title">
				<p>
					<img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="" />
					猜你喜欢
				</p>
			</div>
			<div class="week_content">
				<div class="week_content_box" v-for="item in recommendList" @click="toMain">
					<div class="left"><img :src="item.imgUrl" alt="" /></div>
					<div class="right">
						<div>{{item.title}}</div>
						<div><span>201条评论</span></div>
						<div>
							<p>
								￥
								<span>130<em>起</em></span>
							</p>
							<p>迎泽区</p>
						</div>
						<div>帅的人都去过了，你还在等什么~</div>
					</div>
				</div>
				
				
				
				
			</div>
			
			<div class="week_bottom">查看所有产品</div>
		</div>
	</div>
</template>

<script>
	
	export default{
		props:['recommendList'],
		methods:{
			toMain(){
				this.$router.push('/Main');
			}
		}
	}
	
	
</script>

<style scoped="scoped">
	
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.week{
		width: 100%;
		background: #fff;
		border-bottom: .2rem solid #ccc;
	}
	.week .week_title{
		width: 100%;
		height: .8rem;
		display: flex;
		/*background: red;*/
		align-items: center;
		padding: 0 .4rem;
	}
	.week .week_title p{
		text-align: center;
		font-size: .33rem;
	}
	.week .week_title p img{
		width: .3rem;
		height: .3rem;
		vertical-align:bottom;
	}
	.week_content{
		width: 100%;
		padding: .2rem .4rem 0 .4rem;
	}
	.week_content_box{
		width: 100%;
		height: 3rem;
		display: flex;
		margin-top: .2rem;
		border-bottom: .02rem solid #ccc;
	}
	.week_content_box .left{
		width: 30%;
		height: 100%;
		position: relative;
	}
	.week_content_box .left img{
		width: 100%;
		height: 60%;
	}
	.week_content_box .right{
		width: 70%;
		height: 100%;
		padding: .2rem .2rem 0 .2rem;
		position: relative;
	}
	.week_content_box .right div:nth-child(1){
		font-size: .3rem;
		margin-top: .2rem;
	}
	.week_content_box .right div:nth-child(2){
		display: flex;
		margin-top: .2rem;
		color: #999;
	}
	.week_content_box .right div:nth-child(2) span{
		font-size: .2rem;
	}
	.week_content_box .right div:nth-child(3){
		display: flex;
		margin-top: .2rem;
		justify-content: space-between;
		align-items: center;
	}
	.week_content_box .right div:nth-child(3) p:nth-of-type(1){
		font-size: .1rem;
		margin-top: .1rem;
		color: orange;
	}
	.week_content_box .right div:nth-child(3) p:nth-of-type(1) span{
		font-size: .4rem;
		color: orange;
	}
	.week_content_box .right div:nth-child(3) p:nth-of-type(1) span em{
		font-size: .2rem;
		color: #FF5555;
		font-style: normal;
	}
	.week_content_box .right div:nth-child(3) p:nth-of-type(2){
		font-size: .1rem;
		color: #999;
	}
	.week_content_box .right div:nth-child(4){
		margin-top: .4rem;
		font-size: .2rem;
		color: darkred;
	}
	.week .week_bottom{
		width: 100%;
		height: .8rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .3rem;
		color: deepskyblue;
	}
	
	
	
	
	
	
	
	
	
	
</style>